<template>
  <div class="app-container calendar-list-container">
    <!--<div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="支付宝账户ID" v-model.trim="cardBandReflow.user_id"> </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="证件号码" v-model.trim="cardBandReflow.userCardNo"> </el-input>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-if="cardBandReflowManager_btn_add" style="margin-left: 10px;" @click="handleCreate" type="primary" >添加</el-button>
    </div>-->
    <el-row>
    <!--<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
        <el-table-column
        type="index" label="序号"  header-align="center" align="center" width="65">
        <template scope="scope"><span>{{scope.$index+(cardBandReflow.page - 1) * cardBandReflow.limit + 1}} </span></template>
    </el-table-column>
      <el-table-column align="center" label="id" width="65" v-if="false">
      <template scope="scope">
        <span>{{scope.row.id}}</span>
      </template>
    </el-table-column>
    </el-table>-->
    <!--<div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="cardBandReflow.page" :page-sizes="[10,20,30, 50]" :page-size="cardBandReflow.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>-->
    <el-col :span="16" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="130px" >
      	
      <el-form-item label="APPID" prop="appid">
      <el-input v-model.trim="form.appid" placeholder="请输入APPID"></el-input>
    </el-form-item>
    		<el-form-item label="城市行政区划编码" prop="city_code">
      <el-input v-model.trim="form.city_code" placeholder="请输入城市行政区划编码"></el-input>
    </el-form-item>
        <el-form-item label="支付宝账户ID" prop="user_id">
      <el-input v-model.trim="form.user_id" placeholder="请输入支付宝账户ID"></el-input>
    </el-form-item>	
        <el-form-item label="社保卡内部卡号" prop="medical_card_id">
      <el-input v-model.trim="form.medical_card_id" placeholder="请输入社保卡内部卡号（部签发号）"></el-input>
    </el-form-item>
        <el-form-item label="外部社保卡号" prop="medical_card_no">
      <el-input v-model.trim="form.medical_card_no" placeholder="请输入外部社保卡号"></el-input>
    </el-form-item>
    <el-form-item label="签约状态" prop="sign_status">
      <!--<el-input v-model="form.sign_status" placeholder="成功绑定：ACTIVED;成功解绑：DELETE">-->
      	<el-select v-model="jgAddOpton" @change="getjgSel" placeholder="请选择签约状态">
        <el-option
          v-for="item in jgAddSel"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </el-input>
    </el-form-item>
        <el-form-item label="银行卡卡号" prop="bank_card_no">
      <el-input v-model.trim="form.bank_card_no" placeholder="请输入银行卡卡号"></el-input>
    </el-form-item>
    		<el-form-item label="手机号" prop="mobile">
      <el-input v-model.trim="form.mobile" placeholder="请输入手机号"></el-input>
    </el-form-item>
    		<el-form-item label="证件类型" prop="out_user_card_type">
      <el-input v-model.trim="form.out_user_card_type" placeholder="请输入证件类型"></el-input>
    </el-form-item>
    		<el-form-item label="证件号码" prop="out_user_card_no">
      <el-input v-model.trim="form.out_user_card_no" placeholder="请输入证件号码"></el-input>
    </el-form-item>
        <el-form-item label="姓名" prop="out_real_name">
      <el-input v-model.trim="form.out_real_name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    		<el-form-item >
        <el-button  type="primary" @click="create('form')">确 定</el-button>
        <el-button @click="cancelTwo('form')">取 消</el-button>
    </el-form-item>
    </el-form>
    </el-col>
    </el-row>
    
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisibleTwo">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      	
      <el-form-item label="返回json字符串" prop="message" >
      <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" v-model="form.message" placeholder="返回json字符串"></el-input>
    </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
         <el-button  type="primary" @click="cancel('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
      page,
      reflow,
      getObj,
      delObj,
      putObj
  } from 'api/admin/yyUserBindInfo/index';
  import { mapGetters } from 'vuex';
  export default {
    name: 'cardBandReflow',
    data() {
      return {
        form: {
        appid : undefined,        user_id : undefined,        medical_card_id : undefined,        medical_card_no : undefined,        bank_card_no : undefined,        mobile : undefined,        out_real_name : undefined,        out_user_card_type : undefined,        out_user_card_no : undefined,        sign_status : undefined,        city_code : undefined  , message : undefined },
        rules: {
        	user_id: [
  {
    required: true,
    message: '请输入支付宝账户ID',
    trigger: 'blur'
  },
  {
    /*min: 1,
    max: 28,
    message: '长度在 28个字符内',*/
    trigger: 'blur'
  }
],  out_user_card_no: [
  {
    required: true,
    message: '请输入证件号码',
    trigger: 'blur'
  },
  {
    /*min: 1,
    max: 32,
    message: '长度在 32个字符内',*/
    trigger: 'blur'
  }
]/*,  appid: [
  {
    required: true,
    message: '请输入APPID',
    trigger: 'blur'
  }
],  city_code: [
  {
    required: true,
    message: '请输入城市行政区划编码',
    trigger: 'blur'
  }
],  mobile: [
  {
    required: true,
    message: '请输入手机号',
    trigger: 'blur'
  }
],  out_user_card_type: [
  {
    required: true,
    message: '请输入证件类型',
    trigger: 'blur'
  }
],  out_real_name: [
  {
    required: true,
    message: '请输入姓名',
    trigger: 'blur'
  }
],  sign_status: [
  {
    required: true,
    message: '请选择签约状态',
    trigger: 'blur'
  }
]   */  },
        list: null,
        total: null,
        listLoading: false,
        jgAddSel: [{
            value: 'ACTIVED',
            label: '绑卡'
          }, {
            value: 'DELETED',
            label: '解绑'
          }],
        jgAddOpton: '',
        dialogFormVisible: true,
        dialogFormVisibleTwo: false,
        dialogStatus: '',
        cardBandReflowManager_btn_view:false,
        cardBandReflowManager_btn_edit: false,
        cardBandReflowManager_btn_del: false,
        cardBandReflowManager_btn_add: false,
        textMap: {
          update: '编辑',
          create: '回流数据',
          checked:'查看'
        },
        tableKey: 0
      }
    },
    created() {
      this.getList();
      this.cardBandReflowManager_btn_view = this.elements['yyUserBindInfoTwoManager:view'];
      this.cardBandReflowManager_btn_edit = this.elements['yyUserBindInfoTwoManager:btn_edit'];
      this.cardBandReflowManager_btn_del = this.elements['yyUserBindInfoTwoManager:btn_del'];
      this.cardBandReflowManager_btn_add = this.elements['yyUserBindInfoTwoManager:btn_add'];
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
    	checkedFn (data) {
      this.dialogStatus = 'checked';
      this.dialogFormVisible = true;
      this.form = data
    	},
    	checked (formName) {
      this.dialogFormVisible = false;
      const set = this.$refs;
      set[formName].resetFields();
    	},
      getList() {
      	this.dialogStatus = 'create';
        this.form.out_user_card_type = '01';
      },
      // 创建时 获取签约状态的值
      getjgSel(val) {
        this.form.sign_status = val
      },
      handleFilter() {
        if(!this.cardBandReflow.user_id && !this.cardBandReflow.userCardNo) {
          this.$message({
            message: '请至少输入一项搜索条件！',
            duration: '2000',
            type: 'warning'
          })
        return false
        }
        this.getList();
      },
      handleSizeChange(val) {
        this.cardBandReflow.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.cardBandReflow.page = val;
        this.getList();
      },
      handleCreate() {
      	this.jgAddOpton = this.form.sign_status;
        this.resetTemp();
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
        this.form.out_user_card_type = '01';
      },
      handleUpdate(row) {
        getObj(row.id)
            .then(response => {
          this.form = response.data;
        this.dialogFormVisible = true;
        this.dialogStatus = 'update';
      });
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
          delObj(row.id)
      .then(() => {
          this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        });
        const index = this.list.indexOf(row);
        this.list.splice(index, 1);
      });
      });
      },
      create(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
        if (valid) {
        	 if(!this.form.user_id){
          this.$notify({
            title: '提示',
            message: '请输入支付宝账户ID',
            type: 'warning',
            duration: 2000
            });
            return false
        }
        if(!this.form.out_user_card_no){
          this.$notify({
            title: '提示',
            message: '请输入证件号码',
            type: 'warning',
            duration: 2000
            });
            return false;
        }
        reflow(this.form)
        .then((result) => {
          if(result.status==0||result.status==1){
        	this.form.message = result.message;
        //this.dialogFormVisible = false;
        this.dialogFormVisibleTwo = true;
        }else{
        /*this.getList();*/
        this.$notify({
        title: '提示',
        message: result.message,
        type: 'warning',
        duration: 3000
        });
         }
        })
        } else {
        return false;
        }
        });
      },
      cancel(formName) {
//        this.dialogFormVisible = false;
        this.dialogFormVisibleTwo = false;
        /*const set = this.$refs;
        set[formName].resetFields();*/
      },
      cancelTwo(formName) {
      	
//    	this.form={brand_right:0};
        this.form.appid = undefined;
        this.form.city_code = undefined;
        this.form.user_id = undefined;
        this.form.mobile = undefined;
        this.form.out_user_card_no = undefined;
        this.form.out_real_name = undefined;
        this.form.bank_card_no = undefined;
        this.form.medical_card_id = undefined;
        this.form.medical_card_no = undefined;
      	this.jgAddOpton='ACTIVED';
      	this.form.out_user_card_type = '01';
        this.dialogFormVisible = true;
        this.dialogFormVisibleTwo = false;
      },
      update(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
        if (valid) {
        this.dialogFormVisible = false;
        this.form.password = undefined;
        putObj(this.form.id, this.form).then(() => {
        this.dialogFormVisible = false;
        this.getList();
        this.$notify({
        title: '成功',
        message: '创建成功',
        type: 'success',
        duration: 2000
        });
        });
        } else {
        return false;
        }
        });
      },
      resetTemp() {
        this.form = {
          username: undefined,
          name: undefined,
          sex: '男',
          password: undefined,
          description: undefined
        };
      }
    }  
  }
</script>
